<template>
    <span>区域选择：</span>
    <el-select v-model="formData.areaId" class="m-2" placeholder="Select" @change="change">
        <el-option v-for="item in areaData" :label="item.name" :value="item.id"/>
    </el-select>
  <!--分隔线-->
    <el-divider>
        <el-icon>
            <star-filled/>
        </el-icon>
    </el-divider>

    <el-row :gutter="20">
        <!--一共24，左2-->
        <el-col :span="4">
            <el-tabs tab-position="left" @tab-change="tabChange" v-model="tabPaneName">
                <el-tab-pane v-for="item in warehouseList" :name="item.id" :label="item.name">

                </el-tab-pane>
            </el-tabs>
        </el-col>
        <!--右边24-->
        <el-col :span="20">
            <!--表单-->
            <el-form :inline="true" :model="formData" label-width="50px">
                <el-form-item size="small">
                    <el-input v-model="formData.name" placeholder="货架名称"/>
                </el-form-item>
                <el-form-item size="small">
                    <el-input v-model="formData.brief" placeholder="简介"/>
                </el-form-item>
                <el-form-item size="small">
                    <el-button type="primary" @click="add">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
            <!--表格-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="id" label="编号" width="80"/>
                <el-table-column prop="name" label="名称" width="120">
                    <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="brief" label="简介" width="250">
                    <template #default="scope">
                        <el-input v-model="scope.row.brief"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="lastUpdateBy" label="更新人" width="120"/>
                <el-table-column prop="lastUpdateTime" label="更新时间" width="200" :formatter="formatter"/>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-popconfirm title="确认修改吗？" @click="editClick(scope.row)">
                            <template #reference>
                                <el-button type="primary" size="middle">保存修改
                                </el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="danger" size="middle" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>


</template>
<script lang="ts" setup>
import {onMounted, ref, reactive} from 'vue'
import {warehouseApi, shelfApi} from '@/api/index'
import {ElMessage, ElMessageBox} from 'element-plus'
import dayjs from 'dayjs'


const warehouseList = ref([])
const formData = reactive({
    areaId: 0,
    name: "",
    brief: ""
})
const tableData = ref([])
const areaData = ref([])
const tabPaneName = ref('')

onMounted(() => {
    callWareHouseApi()
    callAreaApi()
})
const callAreaApi = () => {
    warehouseApi.area_select.call().then((res: any) => {
        areaData.value = res
        formData.areaId = res[2].id
        callWareHouseApi()
    })
}

const callWareHouseApi = () => {
    warehouseApi.select.call({areaId: formData.areaId == 0 ? undefined : formData.areaId}).then((res: any) => {
        warehouseList.value = res
        tabPaneName.value = res[0].id//默认选中第一项，赋值触发，tabChange事件
    })
}
const callShelfApi = () => {
    shelfApi.select.call({warehouseId: tabPaneName.value}).then((res: any) => {
        tableData.value = res
    })
}

const tabChange = (TabPaneName: any) => {
    callShelfApi()
}
const add = () => {
    shelfApi.insert.call({
        name: formData.name,
        brief: formData.brief,
        warehouseId: tabPaneName.value
    }).then((res: any) => {
        ElMessage.success("添加成功")
        callShelfApi()
    })

}

const change = (value: any) => {
    callWareHouseApi()
}
const formatter = (row: any, column: any, cellValue: any, index: any) => {
    return dayjs(cellValue).format('MM月DD日 HH:mm')
}


const deleteClick = (row: any) => {
    ElMessageBox.confirm('确定要删除 ' + row.name + ' 吗?', '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            shelfApi.delete.call({id: row.id}).then((res: any) => {
                if (res === 1) {
                    ElMessage({message: '删除成功', type: 'success',})
                    callShelfApi()
                }
            })
        })
}
const editClick = (row: any) => {
    shelfApi.update.call({
        id: row.id,
        name: row.name,
        brief: row.brief,
        warehouseId: row.warehouseId
    }).then((res: any) => {
        ElMessage.success("修改成功")
    })

}
</script>